<template>
    <div>
        <h-section title="评审记录" collapse class="review_product_audit">
            <a-form layout="inline" ref="ruleFormRef" :model="form" :rules="rules">
                <a-row>
                    <a-col :span="16">
                        <a-form-item label="审核意见" name="opinion">
                            <div style="width: 100%">
                                <span style="white-space: pre-wrap" v-html="form.opinion" v-if="disabled" />
                                <a-textarea v-model:value="form.opinion" showCount :maxlength="500" auto-size v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="16">
                        <a-form-item label="评审记录" :span="24">
                            <file-cell :fileList="form.files" v-if="disabled" />
                            <upload-cell :fileParams="{ connectType: '评审记录', type: 1 }" :fileList="form.files" @valueChange="fileChange" v-else>
                                <template #extra> <span class="caption-font-color">提示：可以上传评审记录</span> </template>
                            </upload-cell>
                        </a-form-item>
                    </a-col>
                    <a-col :span="16" v-if="!isHistoryModal">
                        <a-form-item label="评审结果" :span="24">
                            <span v-if="form.pass === '是'">通过</span>
                            <span v-if="form.pass === '否'">驳回</span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="16" v-if="!isHistoryModal">
                        <a-form-item label="评审人" :span="24">
                            <span>{{ userInfo.employeeDTO.name }}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="16" v-if="!isHistoryModal">
                        <a-form-item label="评审日期" :span="24">
                            <span>{{ $moment().format('YYYY-MM-DD HH:mm:ss') }}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </h-section>
    </div>
</template>

<script lang="ts">
import { UploadCell, FileCell } from '@/components';
import { defineComponent, computed, ref, unref, nextTick } from 'vue';
interface FormState {
    opinion: string;
    pass: string;
    files: any[];
}
export default defineComponent({
    name: 'ProductAudit',
    components: {
        UploadCell,
        FileCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        stepStatus: { type: String, default: '' },
        disabled: { type: Boolean, default: false },
        stage: { type: String, default: '' },
        isHistoryModal: { type: Boolean, default: false }
    },
    emits: ['save'],
    setup(props) {
        const ruleFormRef = ref<any>();
        const form = ref<FormState>({
            opinion: '',
            pass: '',
            files: []
        });
        const rules = computed(() => {
            const rules = {
                opinion: form.value.pass === '否' ? [{ required: true, message: '审核意见不能为空', trigger: 'change' }] : []
            };
            return props.disabled ? {} : rules;
        });
        const validate = async (query) => {
            // 先移除所有旧的校验提示
            unref(ruleFormRef).clearValidate();
            form.value = {
                ...form.value,
                ...query
            };
            await nextTick();
            try {
                await unref(ruleFormRef).validate();
                return true;
            } catch (err) {
                // 校验失败自动滚动到错误位置
                const dom = document.querySelector('.review_product_audit');
                dom?.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
                return false;
            }
        };
        // 监听文件删除等操作
        const fileChange = (fileList: any[]) => {
            form.value.files = [...fileList];
        };
        const init = () => {
            const { files } = props.detail;
            Object.keys(unref(form)).forEach((key) => {
                if (key === 'files') {
                    if (files.length) {
                        form.value.files = files.filter((item) => item.connectType === '评审记录');
                    }
                } else {
                    form.value[key] = props.detail[key];
                }
            });
        };
        init();
        return {
            ruleFormRef,
            form,
            rules,
            validate,
            fileChange
        };
    }
});
</script>
<style lang="less" scoped>
.cell-item {
    font-size: 14px;
    margin-bottom: 8px;
    &-label {
        color: @caption-font-color;
    }
}
button + button {
    margin-left: 8px;
}
</style>